<script setup>
defineProps({
  prize: {
    type: Object,
    required: true
  }
})
</script>

<template>
<div class="prize-item">
  <van-image class="prize-img" :src="prize.blind_box_prize_image" fit="cover">
  </van-image>
  <div class="prize-info">
    <div>{{prize.blind_box_prize_name}}</div>
    <div><span :style="{color: prize.level_color}">{{prize.level_name}}</span> ￥{{prize.price}} x{{prize.num}}</div>
  </div>
</div>
</template>

<style scoped lang="less">
.prize-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;

  .prize-img {
    width: 100px;
    height: 100px;
  }

  .prize-info {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }
}
</style>